groups {
    position: relative;
}

groups .groupsContainer {

    overflow: hidden;
    height: 100%;
    position: relative;
}

groups .groupContainer {
    height: calc(100% - 67px);
    overflow-y: auto;
}

groups .addHolder {
    bottom: 0;
    right: 0;
    margin-right: 12px;
    width: 100%;
    background: #fff;
    margin: 0;
    padding: 0;
}

groups .spinner {
    width: 25px !important;
    margin: 12.5px !important;
    height: 25px !important;
}

groups .spinner svg {
    width: 25px !important;
    height: 25px !important;
    transform-origin: initial !important;
}

groups .groupNameContainer {
    margin-bottom: 20px;
}

groups .groupMarginBottom {
    /** Bit of a hack to battle with angular material **/
    margin-bottom: 70px !important;
}

groups .metaMargin {
    margin: 3px;
}

groups .groupNameInput {
    margin-top: 20px;
    width: 100%;
}

groups .groupMain {
    width: 315px;
}

groups .groupMetaData {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
    margin:10px 5px;
}

groups .groupColorBar {
    width: 15px;
    margin: 10px;
    min-height: 75px;
    max-height: 75px;
}

groups .groupColorHolder {
    width: 125px;
}


groups .groupEnterHolder {
    width: 45px;
    background: #0c2f54;
    color: white;
}

groups .groupEnterSpace {
    width: 45px;
}

groups .groupObjectMetaContainer {

}

groups .groupObjectMeta {
    font-size: 14px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 3px;
}

groups .groupMeta {
   font-size: 12px;
   color: #8a8a8a;
   margin-right: 10px;
   height: 100%;
}

groups .groupName {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 0px;
    height: 100%;
}

groups .groupEnterHolder {
    cursor: pointer;
}

groups .groupEnterHolder md-icon {
    color: white;
}

groups .openedGroupColorBar {
    width: 8px;
    margin-top: 13px;
    height: 30px;
    margin-right: 10px;
}

groups .groupDescription {
    color: #8a8a8a;
    font-size: 12px;
}

groups .group:hover {
    background:  rgba(186, 197, 225, 0.20);
}

groups .group {
    border-bottom: solid gainsboro 1px;
    min-height: 95px;
    max-height: 95px;
    height: 100%;
}

groups .groupsList {
    display: block;
    position: relative;
    cursor: pointer;
    height: calc(100% - 52px);
    overflow-y: scroll;
}

/** menus appear in another part of the DOM **/

.groupColorGrid  {
    margin-top: 10px;
}

.groupColorColumn {
    width: 40px;
    padding-left: 5px;
    padding-right: 5px;
}

.groupHexColor {
    width: 135px;
}

.groupCurrentColor {
    color: #9e9e9e;
}

.groupHexColorContainer {
    margin-top: 16px;
    margin-bottom: 0px;
}

.groupCurrentColorBlock {
    height: 80px;
    width: 80px;
    margin-top: 15px;
}

.groupColorMenu {
    height: 205px;
    width: 365px;
}

.groupColorContainer {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}

.groupColor {
    width: 30px;
    height: 30px;
}

.groupCurrentColorHolder {
    margin-top: 10px;
}

.remoteNotification {
    position: absolute;
    width: 100%;
    background-color: rgba(212,212,212,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.remoteNotification .message{
    padding: 15px 25px;
    background-color: hsla(0,0%,100%,.9);
    border: 1px solid #ddd;
}

.remoteNotification.groupJustDeleted {
    height: 94px;
}

.remoteNotification.groupJustUpdated {
    top: 0;
    height: calc(100% - 50px);
}
